<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>服务订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <link rel="stylesheet" href="../assets/css/icon.css"/>
    <style type="text/css">
        .am-list-news-hd{ padding: 0; height: 100%; }
        .am-list-news-hd span.am-text-sm{ color: #808080; }
        .am-list-item-desced{ padding-bottom:0; }
        .am-list{margin-bottom: 0;}
        .map{margin-top: 10px;}
        .am-list h2,.am-list p{font-size: 1.2rem;line-height: 1.8rem;}
        ul.am-list li{margin-top: 10px;}
        section#kuaikuai-tab .am-tabs-bd .am-tab-panel{background-color: #eee}
        .cbtn{border-top: 1px solid #eee;margin-top: 5px;}
    </style>
</head>
<body>
<section id="kuaikuai-tab">
    <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
        <ul class="am-tabs-nav tabs-nav am-cf">
            <li class="am-active">
                <a data-kuai-tabs="0">未支付</a>
            </li>
            <li class="">
                <a data-kuai-tabs="1">未消费</a>
            </li>
            <li class="">
                <a data-kuai-tabs="2">已消费</a>
            </li>
        </ul>

        <div class="am-tabs-bd" id="ok" style="border: 1px solid #d2d2d2;">
            <!-- 未支付 -->
            <div class="am-tab-panel am-active" data="tab1">
                <ul class="am-list">
                    <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
                        <section style="display: table;height: 50px;">
                            <aside class="am-u-sm-4 am-list-thumb no-right-p">
                                <img src="../assets/i/examples/test1.png" alt="">
                            </aside>
                            <section class="am-u-sm-8 am-list-main">
                                <h2 class="am-list-item-hd am-text-sm">快快极致打蜡洗车</h2>
                                <h2 class="am-text-sm">消费号：AX8978</h2>
                                <p class="am-text-sm">未支付</p>
                            </section>
                        </section>

                        <section class="clearfix"></section>

                        <section class="content-btn cbtn">
                            <button type="button" class="am-btn am-btn-success am-u-sm-6">付款</button>
                            <button type="button" class="am-btn am-btn-danger am-u-sm-6">取消</button>
                        </section>
                    </li>

                    <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
                        <section style="display: table;height: 50px;">
                            <aside class="am-u-sm-4 am-list-thumb no-right-p">
                                <img src="../assets/i/examples/test1.png" alt="">
                            </aside>
                            <section class="am-u-sm-8 am-list-main">
                                <h2 class="am-list-item-hd am-text-sm">快快极致打蜡洗车</h2>
                                <p class="am-text-sm">总价：38元</p>
                                <h2 class="am-text-sm">线下支付码：X8908</h2>
                            </section>
                        </section>

                        <section class="clearfix"></section>

                        <section class="content-btn cbtn" style="text-align: center;">
                            <button type="button" class="am-btn am-btn-danger">取消</button>
                        </section>
                    </li>
                </ul>
            </div>

            <!-- 未消费 -->
            <div class="am-tab-panel " data="tab2">
                <ul class="am-list">
                    <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
                        <section style="display: table;height: 50px;">
                            <aside class="am-u-sm-4 am-list-thumb no-right-p">
                                <img src="../assets/i/examples/test1.png" alt="">
                            </aside>
                            <section class="am-u-sm-8 am-list-main">
                                <h2 class="am-list-item-hd am-text-sm">快快极致打蜡洗车</h2>
                                <h2 class="am-text-sm">消费号：AX8978</h2>
                                <p class="am-text-sm">未消费</p>
                            </section>
                        </section>

                        <section class="clearfix"></section>
                        <section class="am-list-news-hd am-cf map">
                            <a href="#" style="display: block; height: 35px;line-height: 35px;padding: 0 10px;">
                                <span class="am-text-sm">南园汽修服务中心</span>
                                <i class="ui-fonts icon-chevron-right am-fr"></i>
                            </a>
                        </section>

                        <section class="content-btn" style="text-align: center;">
                            <button type="button" class="am-btn am-btn-success">拨打电话</button>
                        </section>
                    </li>
                </ul>
            </div>

            <!-- 已消费 -->
            <div class="am-tab-panel " data="tab3">
                <ul class="am-list">
                    <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
                        <section style="display: table;height: 50px;">
                            <aside class="am-u-sm-4 am-list-thumb no-right-p">
                                <img src="../assets/i/examples/test1.png" alt="">
                            </aside>
                            <section class="am-u-sm-8 am-list-main">
                                <h2 class="am-list-item-hd am-text-sm">南园汽车服务中心</h2>
                                <h2 class="am-text-sm">总价：38元</h2>
                                <p class="am-text-sm">已消费</p>
                            </section>
                        </section>

                        <section class="clearfix"></section>
                        <section class="am-list-news-hd am-cf map">
                            <a href="#" style="display: block; height: 35px;line-height: 35px;padding: 0 10px;">
                                <i class="ui-fonts ui-location ui-left"></i>
                                <span class="am-text-sm">深圳市南山区南园工业园A栋首层</span>
                                <i class="ui-fonts icon-chevron-right am-fr"></i>
                                <span class="am-fr" style="padding-right: 5px;">1.6km</span>
                            </a>
                        </section>

                        <section class="content-btn">
                            <button type="button" class="am-btn am-btn-success am-u-sm-6">拨打电话</button>
                            <button type="button" class="am-btn am-btn-danger am-u-sm-6">快快洗车</button>
                        </section>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        //  tab点击切换
        $('.tabs-nav a').on('click', function() {
            $('.am-tabs-bd').css({ 'display':'block' });
            $('.am-tabs-nav > li').removeClass('am-active');
            $(this).parent().addClass('am-active');
            $('.am-tabs-bd div').removeClass('am-active');
            var tabsNum = $(this).attr('data-kuai-tabs');
            var aTabs = $('.am-tabs-bd div');
            $(aTabs[tabsNum]).addClass('am-active');
        });
    });
</script>
</body>
</html>